<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">申请请假</text>
		</view>
    
    <!-- 内容区 -->
    <!-- 申请时间 -->
    <view class="shenqingshijian">
      <!-- title -->
      <view class="qjtitle">
        <text></text>
        <text>请假申请</text>
      </view>
      <!-- 1 -->
      <view class="qingjiatime">
        <text>开始请假：</text>
        <text>2020-05-27></text>
      </view>
      <!-- 2 -->
      <view class="qingjiatime">
        <text>结束日期：</text>
        <text>2020-05-27></text>
      </view>
      <!-- 3 -->
      <view class="qingjiatimes">
        <text>请假时间段：</text>
        <text>全天></text>
      </view>
     
      
    </view>
    <!-- 申请内容 -->
    <view>
      <!-- title -->
      <view class="qjtitle">
        <text></text>
        <text>请假申请</text>
      </view>
      <view class="">
        <textarea value="" placeholder="请输入请假原因...."  placeholder-class="textarea"/>
      </view>
    </view>
    <!-- 申请期间课次 -->
    <view>
      <!-- title -->
      <view class="qjtitle">
        <text></text>
        <text>请假期间涉及课次</text>
      </view>
      <view class="bancixinxi">
        <view class="bancilist">
          <view>
            <image src="./img/duihao.png" mode=""></image>
          </view>
          <text>钢琴初级班  2020-05-27 14:00-15:30</text>
        </view>
        
        <view class="bancilist">
          <view>
           <!-- <image src="./img/duihao.png" mode=""></image> -->
          </view>
          <text>钢琴初级班  2020-05-27 14:00-15:30</text>
        </view>
     
     
      </view>
    </view>
    
    <button type="default" class="faqibtn">发起请假</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 222rpx;
}

/* 内容区 */
.shenqingshijian{
  
}
.qjtitle {
  margin-top: 70rpx;
  margin-left: 43rpx;
}
.qjtitle text:nth-child(1){
  display: inline-block;
  width: 6rpx;
  height: 20rpx;
  background: #8DCE2A;
  border-radius: 3rpx;
  margin-right: 18rpx;
}
.qjtitle text:nth-child(2) {
  width: 127rpx;
  height: 30rpx;
  font-size: 32rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;

}
.qingjiatime {
  display: flex;
  justify-content: space-around;
  margin-top: 53rpx;
  /* margin-left: 103rpx; */
}
.qingjiatime text {
  font-size: 28rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;

}
.qingjiatimes {
  margin-top: 53rpx;
  margin-left: 102rpx;
}
.qingjiatimes text {
  font-size: 28rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;

}
.qingjiatimes text:nth-child(1) {
  margin-right: 300rpx;
}
textarea {
  margin: 30rpx auto;
  width: 600rpx;
  height: 200rpx;
  background: #F5F5F5;
  border-radius: 10rpx;
  padding-top: 29rpx;
  padding-left: 31rpx;

}
.textarea {
 
  font-size: 24rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #AAAAAA;
  line-height: 40rpx;

}
.bancixinxi {
  margin-top: 52rpx;
}
.bancilist {
  margin-left: 68rpx;
  display: flex;
  margin-top: 39rpx;
}
.bancilist view{
  width: 26rpx;
  height: 26rpx;
  border: 2px solid #333333;
  border-radius: 6rpx;
 margin-right: 17rpx;
}
.bancilist view image {
  position: relative;
  top: -15rpx;
  width: 27rpx;
  height: 20rpx;
  vertical-align: middle;
}
.bancixinxi .bancilist text {

  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;

}
.faqibtn {
  width: 500rpx;
  height: 90rpx;
  background: linear-gradient(90deg, #D2F79A 0%, #8DCE2A 100%);
  border-radius: 40rpx;
font-size: 32rpx;
color: #FFFFFF;
margin-top: 60rpx;
  }

</style>
